<template>
<div class="swiper_">
<swiper :options="swiperOption">
<swiper-slide v-for="item in items" :key="item.id">
  <img :src="item.img" class="index_img">
  </swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  props: ['items'],
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination', // 配置项 页码
        initialSlide: 0, // 默认第几张
        loop: true, // 循环
        autoplayDisableOnInteraction: false, // 触摸后再次自动轮播
        autoplay: 2000, // 每张播放时长3秒，自动播放
        speed: 1000// 滑动速度
      }
    }
  }
}
</script>

  <!--样式穿透>>> 不受scoped控制-->
 <style lang="stylus" scoped>
  .swiper_>>> .swiper-pagination-bullet-active
       background : #FFF
  .swiper_
       overflow: hidden
       width:100%
       height: 0
       padding-bottom :31.25%
  .index_img
       width :100%
 </style>
